<template>
  <div class="rightbox" v-cloak>
    <h1>公司中心 > 案例新增</h1>
    <div class="add-box" style="width:670px;">
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item
          prop="title"
          label="方案标题"
          :rules="[
            { required: true, message: '方案标题', trigger: 'blur' }
          ]">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item
          prop="designer"
          label="设计师"
          :rules="[
            { required: true, message: '请选择设计师', trigger: 'blur' }
          ]"
        >
          <el-select style="width:540px;" v-model="form.designer" placeholder="请选择设计师">
            <el-option
              v-for="item in form.designerData"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="door"
          label="户型"
          :rules="[
            { required: true, message: '请选择户型', trigger: 'blur' }
          ]"
        >
          <el-select style="width:540px;" v-model="form.door" placeholder="请选择户型">
            <el-option
              v-for="item in form.doorData"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="fixarea"
          label="面积"
          :rules="[
            { required: true, message: '请选择面积', trigger: 'blur' }
          ]"
        >
          <el-select style="width:540px;" v-model="form.fixarea" placeholder="请选择户型">
            <el-option
              v-for="item in form.fixareaData"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="fixmoney"
          label="预算"
          :rules="[
            { required: true, message: '请选择预算', trigger: 'blur' }
          ]">
          <el-select style="width:540px;" v-model="form.fixmoney" placeholder="请选择户型">
            <el-option
              v-for="item in form.fixmoneyData"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="fixstyle"
          label="风格"
          :rules="[
            { required: true, message: '请选择风格', trigger: 'blur' }
          ]">
          <el-select style="width:540px;" v-model="form.fixstyle" placeholder="请选择户型">
            <el-option
              v-for="item in form.fixstyleData"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="state == 0"
          prop="thumbnail"
          label="上传封面图(必填)">
          <input type="file" ref="thumbnail" style="width:350px;float:left;">
          <span>尺寸(296*200)</span>
          <!-- <el-input type="file" class="thumbnail" v-model="form.thumbnail" style="width:350px;float:left;"></el-input> -->
        </el-form-item>
        <el-form-item
          v-if="state == 1"
          prop="thumbnail"
          label="上传封面图">
          <input type="file" ref="thumbnail" style="width:350px;float:left;">
          <span>尺寸(296*200)</span>
          <!-- <el-input type="file" class="thumbnail" v-model="form.thumbnail" style="width:350px;float:left;"></el-input> -->
        </el-form-item>
        <el-form-item
          prop="layoutmap"
          v-if="state == 0"
          label="上传户型图(必填)">
          <input type="file" ref="layoutmap" style="width:350px;float:left;">
          <span>尺寸(230*230)</span>
          <!-- <el-input type="file" class="layoutmap" v-model="form.layoutmap" style="width:350px;float:left;"></el-input> -->
        </el-form-item>
        <el-form-item
          prop="layoutmap"
          v-if="state == 1"
          label="上传户型图">
          <input type="file" ref="layoutmap" style="width:350px;float:left;">
          <span>尺寸(230*230)</span>
          <!-- <el-input type="file" class="layoutmap" v-model="form.layoutmap" style="width:350px;float:left;"></el-input> -->
        </el-form-item>
        <el-form-item
          v-for="(item, index) in form.placeData"
          :key="index"
          prop=""
          :label="item.value">
          <el-upload
            ref='upload'
            :action="action + item.key"
            :on-success="success"
            :on-remove="remove"
            :file-list="item.filelist"
            list-type="picture"
            multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <span style="color:#646464;margin-left:20px;">尺寸(宽度>=1000)</span>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button v-if="state == 0" type="primary" @click="submit('form')">提交</el-button>
          <el-button v-if="state == 1" type="primary" @click="submit2('form')">修改提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      action: '/gp/File/Add?space=',
      form: {
        title: '',
        designer: '',
        designerData: [],
        door: '',
        doorData: [],
        fixarea: '',
        fixareaData: [],
        fixstyle: '',
        fixstyleData: [],
        fixmoney: '',
        fixmoneyData: [],
        placeData: [],
        thumbnail: '',
        layoutmap: ''
      },
      fileList: [],
      imgList: [],
      schemeIndex: '',
      state: ''
    }
  },
  methods: {
    getParams () {
      var that = this
      that.schemeIndex = that.$route.params.schemeIndex
      if (that.schemeIndex) {
        that.state = 1
        that.$axios.request('post', '/CompanyScheme/SchemeDetail', {
          SchemeIndex: that.schemeIndex
        })
          .then((res) => {
            if (res.code === 0) {
              that.form.title = res.data.title
              that.form.designer = res.data.designer.key
              that.form.door = res.data.door.key
              that.form.fixarea = res.data.fixArea.key
              that.form.fixstyle = res.data.fixStyle.key
              that.form.fixmoney = res.data.fixMoney.key
              for (var k = 0; k < res.data.items.length; k++) {
                for (var t = 0; t < res.data.items[k].images.length; t++) {
                  res.data.items[k].images[t].url = res.data.items[k].images[t].value
                  res.data.items[k].images[t].positionIndex = res.data.items[k].positionIndex
                  that.imgList.push(res.data.items[k].images[t])
                }
              }
              for (var i = 0; i < res.data.items.length; i++) {
                for (var j = 0; j < that.form.placeData.length; j++) {
                  if (res.data.items[i].positionIndex === that.form.placeData[j].key) {
                    that.form.placeData[j].filelist = res.data.items[i].images
                  }
                }
              }
            }
          })
      } else {
        that.state = 0
      }
    },
    success (file, fileList) {
      var that = this
      that.imgList.push(fileList)
    },
    remove (file, fileList) {
      var that = this
      for (var i = 0; i < that.imgList.length; i++) {
        if (file.response) {
          if (file.response.data.file === that.imgList[i].response.data.file) {
            that.imgList.splice(i, 1)
          }
        } else {
          if (file.index === that.imgList[i].index) {
            that.imgList.splice(i, 1)
          }
        }
      }
    },
    getData (value, func) {
      var that = this
      that.$axios.request('post', '/Config/Get', {
        ParamIndex: value
      })
        .then((res) => {
          if (res.code === 0) {
            func(res.data.items)
          }
        })
    },
    getIndea () {
      var that = this
      that.$axios.request('post', '/Config/GetDesigner')
        .then((res) => {
          if (res.code === 0) {
            that.form.designerData = res.data.items
            that.getData('1', function (data) {
              that.form.placeData = data
              for (var i = 0; i < that.form.placeData.length; i++) {
                that.form.placeData[i].filelist = []
              }
              that.getParams()
            })
            that.getData('2', function (data) {
              that.form.fixstyleData = data
            })
            that.getData('3', function (data) {
              that.form.doorData = data
            })
            that.getData('4', function (data) {
              that.form.fixareaData = data
            })
            that.getData('6', function (data) {
              that.form.fixmoneyData = data
            })
          }
        })
    },
    submit: function (form) {
      var that = this
      var filelist = []
      for (var i = 0; i < that.form.placeData.length; i++) {
        filelist.push({'PositionId': that.form.placeData[i].key, 'Images': []})
      }
      for (var j = 0; j < that.imgList.length; j++) {
        for (var d = 0; d < filelist.length; d++) {
          if (parseInt(that.imgList[j].response.data.space) === parseInt(filelist[d].PositionId)) {
            filelist[d].Images.push(that.imgList[j].response.data.file)
          }
          if (parseInt(that.imgList[j].index) === parseInt(filelist[d].PositionId)) {
            filelist[d].Images.push(that.imgList[j].response.data.file)
          }
        }
      }
      for (var k = 0; k < filelist.length; k++) {
        filelist[k].Images = filelist[k].Images.join(',')
      }
      var formFile = new FormData()
      that.$refs[form].validate((valid) => {
        if (valid) {
          var layoutmap = that.$refs.layoutmap.files[0]
          var thumbnail = that.$refs.thumbnail.files[0]
          formFile.append('thumbnail', thumbnail)
          formFile.append('layoutmap', layoutmap)
          formFile.append('Title', that.form.title)
          formFile.append('Designer', that.form.designer)
          formFile.append('Door', that.form.door)
          formFile.append('FixArea', that.form.fixarea)
          formFile.append('FixStyle', that.form.fixstyle)
          formFile.append('FixMoney', that.form.fixmoney)
          formFile.append('ScemePositions', JSON.stringify(filelist))
          that.$axios.request2('post', '/CompanyScheme/AddSchemePost', formFile)
            .then((res) => {
              if (res.code === 0) {
                that.$axios.alert('新增成功', '提示', function () {
                  that.resetForm()
                })
              }
            })
        }
      })
    },
    submit2: function (form) {
      var that = this
      var filelist = []
      for (var i = 0; i < that.form.placeData.length; i++) {
        filelist.push({'PositionId': that.form.placeData[i].key, 'Images': []})
      }
      for (var j = 0; j < that.imgList.length; j++) {
        for (var d = 0; d < filelist.length; d++) {
          if (that.imgList[j].index) {
            if (parseInt(that.imgList[j].positionIndex) === parseInt(filelist[d].PositionId)) {
              filelist[d].Images.push(that.imgList[j].index)
            }
          } else {
            if (parseInt(that.imgList[j].response.data.space) === parseInt(filelist[d].PositionId)) {
              filelist[d].Images.push(that.imgList[j].response.data.file)
            }
          }
        }
      }
      for (var k = 0; k < filelist.length; k++) {
        filelist[k].Images = filelist[k].Images.join(',')
      }
      var formFile = new FormData()
      that.$refs[form].validate((valid) => {
        if (valid) {
          var layoutmap = that.$refs.layoutmap.files[0]
          var thumbnail = that.$refs.thumbnail.files[0]
          formFile.append('SchemeIndex', that.schemeIndex)
          formFile.append('thumbnail', thumbnail)
          formFile.append('layoutmap', layoutmap)
          formFile.append('Title', that.form.title)
          formFile.append('Designer', that.form.designer)
          formFile.append('Door', that.form.door)
          formFile.append('FixArea', that.form.fixarea)
          formFile.append('FixStyle', that.form.fixstyle)
          formFile.append('FixMoney', that.form.fixmoney)
          formFile.append('ScemePositions', JSON.stringify(filelist))
          that.$axios.request2('post', '/CompanyScheme/UpdateSchemePost', formFile)
            .then((res) => {
              if (res.code === 0) {
                that.$axios.alert('修改成功', '提示', function () {
                  that.$router.push({ name: 'caseList' })
                })
              }
            })
        }
      })
    },
    resetForm: function () {
      this.form.title = ''
      this.form.designer = ''
      this.form.door = ''
      this.form.fixarea = ''
      this.form.fixstyle = ''
      this.form.fixmoney = ''
      this.form.layoutmap = ''
      this.form.thumbnail = ''
      this.fileList = []
      this.imgList = []
      var that = this
      for (var i = 0; i < that.form.placeData.length; i++) {
        that.form.placeData[i].filelist = []
      }
    }
  },
  mounted () {
    var that = this
    that.action = that.$axios.gp + '/File/Add?space='
    that.getIndea()
  }
}
</script>
<style>
.el-upload-list--picture .el-upload-list__item-thumbnail{width: 200px!important;height: auto;}
.el-upload-list--picture .el-upload-list__item{height: auto;}
</style>
